<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生页面</title>
    <!--    <link rel="stylesheet" href="../../static/bootstrap-3.3.7-dist/css/bootstrap.css">-->
    <!--    <script src="../../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="static/js/jquery-3.1.1.min.js"></script>
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .hidden111{
            width: 100%;
        }
        .hidden111-main{
            height: 100%;
            background-color: rgba(106, 90, 90, 0.5);
            overflow: hidden;
        }
        .hidden111-main .hidden111-main-left{
            float: left;
            height: 100%;
            width: 70%;
        }
        .hidden111-main-left .icon img{
            float: left;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin-top: 10px;
            margin-left: 20px;
        }
        .hidden111-main-left .icon .icon-img{
            top: 10px;
        }
        .hidden111-main-left .icon .h1{
            float: left;
            width: 40%;
            height: 100%;
            font-size: 42px;
            margin-left: 30px;
            top: 40px;
        }

        .hidden111-main .hidden111-main-right{
            margin-top: 0px;
            float: right;
            height: 100%;
            width: 30%;
        }
        .hidden111-main-right .user .set{
            float: right;
            font-size: 35px;
            margin-right: 50px;
            margin-top: 15px;
        }

        .hidden111-main-right .user .message_img{
            margin-top: -15px;
        }

        .hidden111-main-right .user .message{
            display: inline-block;
            font-size: 35px;
            margin-top: 15px;

        }
        .hidden111-main-right .user .end{
            float: right;
            margin-right: 10px;
            font-size: 35px;
            margin-top: 15px;
        }

        .main{
            width: 100%;
            overflow: hidden;
            position: absolute;
        }


        .main .main-left{
            width: 15%;
            height: 100%;
        }

        .main .main-left ul li{
            line-height: 70px;
            font-size: 30px;
        }
        .main .main-left ul li img{
            margin-left: 20px;
        }
        .main .main-left ul li span{
            margin-left: 10px;
        }

        .main .main-left ul li:hover{
            background-color: #4cae4c;
        }

        .main .main-right{
            position: relative;
            float: right;
            top: -195px;
            margin-right: 50px;
            width: 70%;
            height: 100%;
        }

        .main-right .row{
            font-size: 18px;
        }

        .main-right .me{
            width: 30%;
            margin-top: -5px;
            margin-left: 200px;
        }

        .main-right .me ul{
            list-style: none;
        }
        .main-right .me li{
            line-height: 50px;
            font-size: 20px;
            border-bottom: 1px solid black;
        }

        .main-right .me .stuSno{
            margin-left: 160px;
        }
        .main-right .me  .stuSname{
            margin-left: 180px;
        }
        .main-right .me  .stuSex{
            margin-left: 200px;
        }
        .main-right .me .stuClass{
            margin-left: 192px;
        }
        .main-right .me  .stuGrade{
            margin-left: 190px;
        }

    </style>


    <script>
        // 给选课按钮绑定一个点击函数
        $(function (){

            // 给选课按钮绑定一个点击函数
            $(".main-right").delegate(".btn","click",function (){
                if ($(this).parent().text() == "选择"){
                    var courseno = $(this).parent().parent().children().eq(0).text();
                }
                $.ajax({
                            type:"GET",
                            url:'allSc',
                            data:"courseno="+courseno,
                            dataType:'json',
                            beforeSend :function(xmlHttp){
                                xmlHttp.setRequestHeader("If-Modified-Since","0");
                                xmlHttp.setRequestHeader("Cache-Control","no-cache");
                            },
                            success:function(data){
                               if (data.code == 200){
                                   alert("选课成功");
                               }else if (data.code == 100){
                                   alert("该课程您已经选择了，不能重复去选择");
                               }

                            },
                            error:function(data){
                                window.location.href ="index.html";
                            }

                 });

            });

            // 给删除按钮绑定一个点击事件
            $(".main-right").delegate(".deleteToCourse","click",function (){
                var courseno = $(this).parent().parent().children().eq(2).text();
                deleteTocourseno(courseno);
            });


        });

        // 删除选课信息
        let a = 0;
        function deleteTocourseno(courseno){

            alert("我是a"+a);
            $.ajax({
                type:"GET",
                url:'deleteTocourse',
                data:"courseno="+courseno,
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    if (data.code == 200){
                        alert("删除选课");
                        a = 1;
                        alert("我是Ajax的"+a);
                        if (a == 1){
                            a = 0;
                            alert("我点击了已选课程按钮");
                            findToCourse();
                        }
                    }else if (data.code == 100){
                        alert("删除失败");
                    }
                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });

        }



        // 点击查询成绩按钮
        function course(){
            //清空table表格
            $(".main-right").empty();
            // className="table table-hover"
            // <div className="row">
            //     <div className="col-md-12">

            <!-- 显示选课表格数据 -->
            // <div class="row">
            //     <div class="col-md-8">
            //         <table class="table table-hover" id="stu_table">
            //             <thead>
            //             <tr>
            //                 <th>
            //                     <input type="checkbox" id="check_all"/>
            //                 </th>
            //                 <th>课程号:</th>
            //                 <th>课程名:</th>
            //                 <th>课程名额:</th>



            var div1 = $("<div></div>").addClass("row");
            var div2 = $("<div></div>").addClass("col-md-12");
            var table = $("<table></table> ").addClass("table table-hover");
            var thead = $("<thead></thead>").addClass("course-thead");
            var tbody = $("<tbody></tbody>").addClass("course-tbody")
            var tr = $("<tr></tr>").addClass("course-tr");
            var sno = $("<th>学号</th>");
            var sname = $("<th>姓名</th>");
            var courseno = $("<th>课程号</th>");
            var coursename = $("<th>课程名</th>");
            var score = $("<th>成绩</th>");

            //append方法执行完成以后还是返回原来的元素
            $(".main-right")
                .append(div1);
            $(".row").append(div2);
            $(".col-md-12").append(table);
            $(".table").append(thead).append(tbody);
            $(".course-thead").append(tr);
            $(".course-tr").append(sno)
                .append(sname)
                .append(courseno)
                .append(coursename)
                .append(score);




            $.ajax({
                type:"GET",
                url:'studentToCourse',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    var emps = data.extend.list;
                    $.each(emps,function(index,item){
                        var SnoAndCourse = $("<td></td>").append(item.sno);
                        var SnameAndCourse = $("<td></td>").append(item.sname);
                        var SoursenoAndCourse = $("<td></td>").append(item.courseno);
                        var SoursenameAndCourse = $("<td></td>").append(item.coursename);
                        var ScoreAndCourse = $("<td></td>").append(item.score);
                        console.log(SnoAndCourse);
                        console.log(item.sno);
                        if(item.score != null ){
                            var Course = $("<tr></tr>").append(SnoAndCourse)
                                .append(SnameAndCourse)
                                .append(SoursenoAndCourse)
                                .append(SoursenameAndCourse)
                                .append(ScoreAndCourse);
                            $(".table-hover tbody").append(Course);
                        }

                    });

                },
                error:function(data){
                    window.location.href ="index.html";
                }

            });

        }

        // 关于我的按钮
        function toMessage(){
            $(".main-right").empty();

            $.ajax({
                type:"GET",
                url:'studentToMe',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    if (data.code == 200) {
                        let sno = data.extend.me.sno;
                        let sname = data.extend.me.sname;
                        let sex = data.extend.me.sex;
                        let classno = data.extend.me.classno;
                        let grade = data.extend.me.grade;



                        var mediv = $("<div></div>").addClass("me");
                        var meul = $("<ul></ul>").addClass("melu");

                        var meli1 = $("<li></li>").text("学号:");
                        var meli2 = $("<li></li>").text("姓名:");
                        var meli3 = $("<li></li>").text("性别:");
                        var meli4 = $("<li></li>").text("班级:");
                        var meli5 = $("<li></li>").text("年级:");
                        var span1 = $("<span></span>").text(sno).addClass("stuSno");
                        var span2 = $("<span></span>").text(sname).addClass("stuSname");
                        var span3 = $("<span></span>").text(sex).addClass("stuSex");
                        var span4 = $("<span></span>").text(classno).addClass("stuClass");
                        var span5 = $("<span></span>").text(grade).addClass("stuGrade");

                        $(".main-right")
                            .append(mediv);
                        $(".me").append(meul);
                        $(".melu").append(meli1)
                            .append(meli2)
                            .append(meli3)
                            .append(meli4)
                            .append(meli5);
                        meli1.append(span1);
                        meli2.append(span2);
                        meli3.append(span3);
                        meli4.append(span4);
                        meli5.append(span5);

                    }

                    if (data.code == 100){
                        alert("请求失败");
                    }
                },
                error:function(data){
                    window.location.href ="index.html";
                }

            });

        }

        // 退出按钮
        function endsession(){
            $.ajax({
                type:"GET",
                url:'end',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    if (data.code == 200){
                        window.location.href ="index.html";
                    }
                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });
        };

        // 修改密码模态框
        function updatepass(){
            // 清除内容
            // $(".form-horizontal").empty();
            // 弹出模态框


            // 发送一个Ajax请求，检验是否登录
            $.ajax({
                type:"GET",
                url:'studentToLogin',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(result){
                    console.log(result);
                    if (result.code == 200){
                        $("#updatepwd").modal({
                            backdrop:"static"
                        });
                    }else {
                        window.location.href ="index.html";
                    }

                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });

        };

        // 修改密码模态框的保存按钮
        function updatepwdbut(){

            // 把模态框的信息提交个服务器
            // var old = $("#oldpassword").text();
            // var newpass = $("#newpassword").text();
            // var confirmpass = $("#confirmpassword").text();
            // alert(old+"sad"+newpass+"dsad"+confirmpass);
            // alert(old == newpass +"asd" +old +"sad" +newpass);
            // alert(old === newpass);
            // if (old == newpass){
            //     alert("新旧密码不能一样");
            //     return false;
            // }
            // if (newpass == confirmpass){
            //     alert("要修改的密码两次不一样");
            //     return false;
            // }

            //ajax去服务器端校验
            var data= $(".form-horizontal").serialize();
            $.ajax({
                type:"PUT",
                url:'studentToUpdatePass',
                data: data,
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(result){
                    alert(result);
                    if (result.code == 100){

                        let updateToNew = result.extend.updateToNew;
                        let updateToOldAndNew = result.extend.updateToOldAndNew;
                        let updateToOld = result.extend.updateToOld;
                        if (updateToOld != null){
                            alert(updateToOld);
                        }else if (updateToOldAndNew != null){
                            alert(updateToOldAndNew);
                        }else if (updateToNew != null){
                            alert(updateToNew);
                        }
                    }else if (result.code == 200){
                        alert("修改成功")
                    }

                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });

        };

        // 给h1绑定一个点击函数
        function me(){
            // 发送Ajax请求，检验是否登录
            $.ajax({
                type:"GET",
                url:'studentToLogin',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(result){
                    console.log(result);
                    if (result.code == 200){
                        window.location.href ="me";
                    }else {
                        window.location.href ="index.html";
                    }

                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });

        };


        var totalRecord,currentPage;
        //  给选课绑定一个函数
        function chooseCourse(){
            // 调用Ajax请求获取数据
            to_page(1);
        }

        // Ajax请求获取数据
        function to_page(pn){
            $(".main-right").empty();
            var div1 = $("<div></div>").addClass("row div11");
            var div12 = $("<div></div>").addClass("row div22");
            var div2 = $("<div></div>").addClass("col-md-12");
            var div3 = $("<div></div>").addClass("col-md-6 page_info_area");
            var div4 = $("<div></div>").addClass("col-md-6 page_nav_area");
            var table = $("<table></table> ").addClass("table table-hover");
            var thead = $("<thead></thead>").addClass("course-thead");
            var tbody = $("<tbody></tbody>").addClass("course-tbody")
            var tr = $("<tr></tr>").addClass("course-tr");
            var cNo = $("<th>课程号</th>");
            var cName = $("<th>课程名</th>");
            var cNumber = $("<th>数量</th>");
            var cChoose = $("<th>操作</th>");



            //append方法执行完成以后还是返回原来的元素
            $(".main-right")
                .append(div1)
                .append(div12);
            // 添加表单的架构
            $(".div11").append(div2);
            $(".col-md-12").append(table);
            $(".table").append(thead).append(tbody);
            $(".course-thead").append(tr);
            $(".course-tr").append(cNo)
                .append(cName)
                .append(cNumber)
                .append(cChoose);

            // 添加分页架构
            $(".div22").append(div3).append(div4);


            $.ajax({
                type:"GET",
                url:'courseToAll',
                data:"pn="+pn,
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    // 解析显示表单信息
                    build_emps_table(data);
                    //解析显示分页信息
                    build_page_info(data);
                    //解析显示分页条，点击分页要能去下一页....
                    build_page_nav(data);
                },
                error:function(data){
                    window.location.href ="index.html";
                }

            });
        }

        // 显示表单信息
        function build_emps_table(data){
            var emps = data.extend.pageInfo.list;
            $.each(emps,function(index,item){
                var SnoAndCourse = $("<td></td>").append(item.courseno);
                var  SnameAndCourse = $("<td></td>").append(item.coursename);
                var SoursenoAndCourse = $("<td></td>").append(item.number);
                var editBtn = $("<button></button>").addClass(" btn btnToCourse btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("选择");
                var cBut = $("<td></td>").append(editBtn);
                var Courses = $("<tr></tr>").addClass(SnoAndCourse)
                    .append(SnoAndCourse)
                    .append(SnameAndCourse)
                    .append(SoursenoAndCourse)
                    .append(cBut);
                $(".course-tbody").append(Courses);
            });

        }

        //解析显示分页信息
        function build_page_info(data){
            $(".page_info_area").empty();
            $(".page_info_area").append("当前"+data.extend.pageInfo.pageNum+"页,总"+
                data.extend.pageInfo.pages+"页,总"+
                data.extend.pageInfo.total+"条记录");
            totalRecord = data.extend.pageInfo.total;
            currentPage = data.extend.pageInfo.pageNum;
        }


        //解析显示分页条，点击分页要能去下一页....
        function build_page_nav(data) {
            //page_nav_area
            $(".page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");

            //构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            if (data.extend.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //为元素添加点击翻页的事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(data.extend.pageInfo.pageNum - 1);
                });
            }


            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
            if(data.extend.pageInfo.hasNextPage == false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                nextPageLi.click(function(){
                    to_page(data.extend.pageInfo.pageNum +1);
                });
                lastPageLi.click(function(){
                    to_page(data.extend.pageInfo.pages);
                });
            }

            //添加首页和前一页 的提示
            ul.append(firstPageLi).append(prePageLi);
            //1,2，3遍历给ul中添加页码提示
            $.each(data.extend.pageInfo.navigatepageNums,function(index,item){

                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if(data.extend.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                numLi.click(function(){
                    to_page(item);
                });
                ul.append(numLi);
            });
            //添加下一页和末页 的提示
            ul.append(nextPageLi).append(lastPageLi);

            //把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo(".page_nav_area");
        }

        // 给查看选课按钮绑定一个点击函数
       function findToCourse(){
           findToCourseNo();
        }

        function findToCourseNo(){
            $(".main-right").empty();
            var div1 = $("<div></div>").addClass("row div11");
            var div12 = $("<div></div>").addClass("row div22");
            var div2 = $("<div></div>").addClass("col-md-12");
            var table = $("<table></table> ").addClass("table table-hover");
            var thead = $("<thead></thead>").addClass("course-thead");
            var tbody = $("<tbody></tbody>").addClass("course-tbody")
            var tr = $("<tr></tr>").addClass("course-tr");
            var cNo = $("<th>学号</th>");
            var cName = $("<th>课程号</th>");
            var cNumber = $("<th>课程名</th>");
            var cChoose = $("<th>操作</th>");

            $(".main-right")
                .append(div1)
                .append(div12);
            // 添加表单的架构
            $(".div11").append(div2);
            $(".col-md-12").append(table);
            $(".table").append(thead).append(tbody);
            $(".course-thead").append(tr);
            $(".course-tr").append(cNo)
                .append(cName)
                .append(cNumber)
                .append(cChoose);

            $.ajax({
                type:"GET",
                url:'allCourse',
                dataType:'json',
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");
                    xmlHttp.setRequestHeader("Cache-Control","no-cache");
                },
                success:function(data){
                    var emps = data.extend.list;
                    $.each(emps,function(index,item){
                        var SnoAndCourse = $("<td></td>").append(item.courseno);
                        var  SnameAndCourse = $("<td></td>").append(item.coursename);
                        var SoursenoAndCourse = $("<td></td>").append(item.sno);
                        var editBtn = $("<button></button>").addClass("deleteToCourse btnToDelete btnToCourse btn-primary btn-sm edit_btn")
                            .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("删除");
                        var cBut = $("<td></td>").append(editBtn);
                        var Courses = $("<tr></tr>").addClass(SnoAndCourse)
                            .append(SoursenoAndCourse)
                            .append(SnameAndCourse)
                            .append(SnoAndCourse);
                        if (item.score==null){
                            Courses.append(cBut);
                        }
                        $(".course-tbody").append(Courses);
                    });

                },
                error:function(data){
                    window.location.href ="index.html";
                }
            });
        }



    </script>


</head>
<body>

<div class="hidden111">
    <div class="hidden111-main">
        <div class="hidden111-main-left">
            <div class="icon">
                <img class="icon-img" src="static/img/02.jpg" onclick="toMessage()" />
                <h1 class="h1" onclick="me()">欢迎来到诺奇学生系统</h1>
            </div>


        </div>

        <div class="hidden111-main-right">
            <div class="user">
                <div class="end"  onclick="endsession()">退出</div>
                <img class="message_img" src="static/img/me.png" height="30px" width="30px" />

                <span class="message" onclick="toMessage()">关于我的</span>

                <span class="set updatepassword" onclick="updatepass()">设置</span>
            </div>
        </div>
    </div>
</div>

<div class="main">
    <div class="main-left">
        <ul>
            <div>
                <li onclick="course()">
                    <img src="static/img/results.png" height="30px" width="30px"/>
                    <span class="results" >我的成绩</span>
                </li>
            </div>
            <li onclick="chooseCourse()">
                <div>  <img src="static/img/course.png" height="30px" width="30px"/>
                    <span>选课</span></div>
            </li>
            <li>
                <div div="findToCourse" onclick="findToCourse()">  <img src="static/img/success.png" height="30px" width="30px"/>
                    <span>我已选课程</span></div>
            </li>
        </ul>
    </div>

    <div class="main-right">



    </div>
</div>


<!--  修改密码模型框  -->
<!-- Modal -->
<div class="modal fade" id="updatepwd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">


                <form class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">旧密码:</label>
                        <div class="col-sm-10">
                            <input type="text" name="oldpassword" class="form-control" id="oldpassword"  placeholder="oldpassword">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">新密码:</label>
                        <div class="col-sm-10">
                            <input type="text" name="newpassword" class="form-control" id="newpassword"  placeholder="newpassword">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">确认密码:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="confirmpassword" id="confirmpassword"  placeholder="confirmpassword">
                        </div>
                    </div>
                </form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updatepwdbut" onclick="updatepwdbut()">保存</button>
            </div>
        </div>
    </div>
</div>












</body>
</html>